<!-- build time:Thu Oct 04 2018 22:01:07 GMT+0800 (中国标准时间) --><!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no,email=no,adress=no"><meta name="theme-color" content="#000000"><meta http-equiv="window-target" content="_top"><title>gulp常用插件整理 | Cofess - Web Developer &amp; Designer</title><meta name="description" content="任务管理 gulp-nodemon网址: https://www.npmjs.com/package/gulp-nodemon说明：自动启动/重启你的node程序，开发node服务端程序必备。 gulp-task-listing网址: https://www.npmjs.com/package/gulp-task-listing说明：打印出gulpfile.js中定义的所有task。 requi"><meta name="keywords" content="gulp,gulp常用插件,前端构建,前端自动化"><meta property="og:type" content="article"><meta property="og:title" content="gulp常用插件整理"><meta property="og:url" content="https://blog.cofess.com/2017/08/06/gulp-comon-plug-in-colation.html"><meta property="og:site_name" content="Cofess"><meta property="og:description" content="任务管理 gulp-nodemon网址: https://www.npmjs.com/package/gulp-nodemon说明：自动启动/重启你的node程序，开发node服务端程序必备。 gulp-task-listing网址: https://www.npmjs.com/package/gulp-task-listing说明：打印出gulpfile.js中定义的所有task。 requi"><meta property="og:locale" content="zh-CN"><meta property="og:updated_time" content="2017-12-17T10:36:15.960Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="gulp常用插件整理"><meta name="twitter:description" content="任务管理 gulp-nodemon网址: https://www.npmjs.com/package/gulp-nodemon说明：自动启动/重启你的node程序，开发node服务端程序必备。 gulp-task-listing网址: https://www.npmjs.com/package/gulp-task-listing说明：打印出gulpfile.js中定义的所有task。 requi"><link rel="canonical" href="https://blog.cofess.com/2017/08/06/gulp-comon-plug-in-colation.html"><link rel="alternate" href="/atom.xml" title="Cofess" type="application/atom+xml"><link rel="icon" href="" type="image/x-icon"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.min.css"></head><body class="main-center" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="slimContent"><div class="navbar-header"><div class="profile-block text-center"><a id="avatar" href="https://github.com/cofess" target="_blank"><img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200"></a><h2 id="name" class="hidden-xs hidden-sm">Cofess</h2><h3 id="title" class="hidden-xs hidden-sm hidden-md">Web Developer &amp; Designer</h3><small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Shenzhen, China</small></div><div class="search" id="search-form-wrap"><form class="search-form sidebar-form"><div class="input-group"><input type="text" class="search-form-input form-control" placeholder="搜索"> <span class="input-group-btn"><button type="submit" class="search-form-submit btn btn-flat" onclick="return!1"><i class="icon icon-search"></i></button></span></div></form><div class="ins-search"><div class="ins-search-mask"></div><div class="ins-search-container"><div class="ins-input-wrapper"><input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech> <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="ins-section-wrapper"><div class="ins-section-container"></div></div></div></div></div><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button></div><nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation"><ul class="nav navbar-nav main-nav"><li class="menu-item menu-item-home"><a href="/."><i class="icon icon-home-fill"></i> <span class="menu-title">首页</span></a></li><li class="menu-item menu-item-archives"><a href="/archives"><i class="icon icon-archives-fill"></i> <span class="menu-title">归档</span></a></li><li class="menu-item menu-item-categories"><a href="/categories"><i class="icon icon-folder"></i> <span class="menu-title">分类</span></a></li><li class="menu-item menu-item-tags"><a href="/tags"><i class="icon icon-tags"></i> <span class="menu-title">标签</span></a></li><li class="menu-item menu-item-repository"><a href="/repository"><i class="icon icon-project"></i> <span class="menu-title">项目</span></a></li><li class="menu-item menu-item-books"><a href="/books"><i class="icon icon-book-fill"></i> <span class="menu-title">书单</span></a></li><li class="menu-item menu-item-links"><a href="/links"><i class="icon icon-friendship"></i> <span class="menu-title">友链</span></a></li><li class="menu-item menu-item-about"><a href="/about"><i class="icon icon-cup-fill"></i> <span class="menu-title">关于</span></a></li></ul><ul class="social-links"><li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle="tooltip" data-placement="top"><i class="icon icon-github"></i></a></li><li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle="tooltip" data-placement="top"><i class="icon icon-weibo"></i></a></li><li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle="tooltip" data-placement="top"><i class="icon icon-twitter"></i></a></li><li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle="tooltip" data-placement="top"><i class="icon icon-behance"></i></a></li><li><a href="/atom.xml" target="_blank" title="Rss" data-toggle="tooltip" data-placement="top"><i class="icon icon-rss"></i></a></li></ul></nav></div></header><aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar"><div class="slimContent"><div class="widget"><h3 class="widget-title">公告</h3><div class="widget-body"><div id="board"><div class="content">网易星球邀请码：AD3LCW，有机会赢取1.39克拉黑钻【珂兰钻石】，价值7万8，老司机快上车～～请在浏览器中复制粘贴该链接 <a class="text-primary" href="https://163.lu/GTe6P3" target="_blank">https://163.lu/GTe6P3</a> 或者扫描以下二维码，并下载登录<div><img src="/images/xingqiu-qrcode.jpg" width="140" height="140"></div></div></div></div></div><div class="widget"><h3 class="widget-title">分类</h3><div class="widget-body"><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/个人/">个人</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/front-end-development/">前端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/build-website/">建站</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/开发/">开发</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/开发工具/">开发工具</a><span class="category-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">标签</h3><div class="widget-body"><ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Github/">Github</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/gulp/">Gulp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hexo/">Hexo</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/social/">Social</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/工具/">工具</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/状态/">状态</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/程序员/">程序员</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/计划/">计划</a><span class="tag-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">标签云</h3><div class="widget-body tagcloud"><a href="/tags/Github/" style="font-size:13px">Github</a> <a href="/tags/gulp/" style="font-size:13px">Gulp</a> <a href="/tags/Hexo/" style="font-size:14px">Hexo</a> <a href="/tags/social/" style="font-size:13px">Social</a> <a href="/tags/工具/" style="font-size:13px">工具</a> <a href="/tags/状态/" style="font-size:13px">状态</a> <a href="/tags/程序员/" style="font-size:13px">程序员</a> <a href="/tags/计划/" style="font-size:13px">计划</a></div></div><div class="widget"><h3 class="widget-title">归档</h3><div class="widget-body"><ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">三月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/09/">九月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">八月 2017</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">四月 2017</a><span class="archive-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">最新文章</h3><div class="widget-body"><ul class="recent-post-list list-unstyled no-thumbnail"><li><div class="item-inner"><p class="item-category"><a class="category-link" href="/categories/开发/">开发</a></p><p class="item-title"><a href="/2018/03/28/那些有趣的注释，有没有你曾用过的.html" class="title">那些有趣的注释，有没有你曾用过的</a></p><p class="item-date"><time datetime="2018-03-28T12:45:41.000Z" itemprop="datePublished">2018-03-28</time></p></div></li><li><div class="item-inner"><p class="item-category"><a class="category-link" href="/categories/个人/">个人</a></p><p class="item-title"><a href="/2018/03/25/年后的状态，懒！.html" class="title">年后的状态，懒！</a></p><p class="item-date"><time datetime="2018-03-25T06:59:41.000Z" itemprop="datePublished">2018-03-25</time></p></div></li><li><div class="item-inner"><p class="item-category"><a class="category-link" href="/categories/开发工具/">开发工具</a></p><p class="item-title"><a href="/2017/12/17/visual-studio-code-personal-use-plug-in-colation.html" class="title">Visual Studio Code个人使用插件整理</a></p><p class="item-date"><time datetime="2017-12-17T10:32:51.000Z" itemprop="datePublished">2017-12-17</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2017/11/01/hexo-blog-theme-pure-usage-description.html" class="title">Hexo博客主题pure使用说明</a></p><p class="item-date"><time datetime="2017-11-01T13:45:08.000Z" itemprop="datePublished">2017-11-01</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2017/09/06/how-to-use-mathjax-to-render-latex-mathematical-formula-in-hexo.html" class="title">如何在Hexo中使用Mathjax渲染LaTeX数学公式</a></p><p class="item-date"><time datetime="2017-09-06T01:19:34.000Z" itemprop="datePublished">2017-09-06</time></p></div></li></ul></div></div></div></aside><aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar"><div class="slimContent"><nav id="toc" class="article-toc"><h3 class="toc-title">文章目录</h3><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#任务管理"><span class="toc-number">1.</span> <span class="toc-text">任务管理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-nodemon"><span class="toc-number">1.1.</span> <span class="toc-text">gulp-nodemon</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-task-listing"><span class="toc-number">1.2.</span> <span class="toc-text">gulp-task-listing</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#require-dir"><span class="toc-number">1.3.</span> <span class="toc-text">require-dir</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#run-sequence"><span class="toc-number">1.4.</span> <span class="toc-text">run-sequence</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#yargs"><span class="toc-number">1.5.</span> <span class="toc-text">yargs</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#util工具类"><span class="toc-number">2.</span> <span class="toc-text">util工具类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-util"><span class="toc-number">2.1.</span> <span class="toc-text">gulp-util</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-load-plugins"><span class="toc-number">2.2.</span> <span class="toc-text">gulp-load-plugins</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#自动刷新"><span class="toc-number">3.</span> <span class="toc-text">自动刷新</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-connect"><span class="toc-number">3.1.</span> <span class="toc-text">gulp-connect</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#browser-sync"><span class="toc-number">3.2.</span> <span class="toc-text">browser-sync</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-livereload"><span class="toc-number">3.3.</span> <span class="toc-text">gulp-livereload</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#编译类"><span class="toc-number">4.</span> <span class="toc-text">编译类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-base64"><span class="toc-number">4.1.</span> <span class="toc-text">gulp-base64</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-babel"><span class="toc-number">4.2.</span> <span class="toc-text">gulp-babel</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-less"><span class="toc-number">4.3.</span> <span class="toc-text">gulp-less</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-sass"><span class="toc-number">4.4.</span> <span class="toc-text">gulp-sass</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-postcss"><span class="toc-number">4.5.</span> <span class="toc-text">gulp-postcss</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-coffee"><span class="toc-number">4.6.</span> <span class="toc-text">gulp-coffee</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-sourcemaps"><span class="toc-number">4.7.</span> <span class="toc-text">gulp-sourcemaps</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#压缩优化类"><span class="toc-number">5.</span> <span class="toc-text">压缩优化类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-uglify"><span class="toc-number">5.1.</span> <span class="toc-text">gulp-uglify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-minify"><span class="toc-number">5.2.</span> <span class="toc-text">gulp-minify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-minify-inline-scripts"><span class="toc-number">5.3.</span> <span class="toc-text">gulp-minify-inline-scripts</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-minify-css"><span class="toc-number">5.4.</span> <span class="toc-text">gulp-minify-css</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-clean-css"><span class="toc-number">5.5.</span> <span class="toc-text">gulp-clean-css</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-csso"><span class="toc-number">5.6.</span> <span class="toc-text">gulp-csso</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-uncss"><span class="toc-number">5.7.</span> <span class="toc-text">gulp-uncss</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-useref"><span class="toc-number">5.8.</span> <span class="toc-text">gulp-useref</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-html-replace"><span class="toc-number">5.9.</span> <span class="toc-text">gulp-html-replace</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-minify-html"><span class="toc-number">5.10.</span> <span class="toc-text">gulp-minify-html</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-htmlmin"><span class="toc-number">5.11.</span> <span class="toc-text">gulp-htmlmin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#jsonminify"><span class="toc-number">5.12.</span> <span class="toc-text">jsonminify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-pretty-data"><span class="toc-number">5.13.</span> <span class="toc-text">gulp-pretty-data</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-image"><span class="toc-number">5.14.</span> <span class="toc-text">gulp-image</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-imagemin"><span class="toc-number">5.15.</span> <span class="toc-text">gulp-imagemin</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#imagemin-pngquant"><span class="toc-number">5.16.</span> <span class="toc-text">imagemin-pngquant</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-zip"><span class="toc-number">5.17.</span> <span class="toc-text">gulp-zip</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css-sprites-图片精灵"><span class="toc-number">6.</span> <span class="toc-text">css sprites 图片精灵</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulpspritesmith"><span class="toc-number">6.1.</span> <span class="toc-text">gulp.spritesmith</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulpspritesmith-multi"><span class="toc-number">6.2.</span> <span class="toc-text">gulp.spritesmith-multi</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-sprite-generator"><span class="toc-number">6.3.</span> <span class="toc-text">gulp-sprite-generator</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-spritesmith"><span class="toc-number">6.4.</span> <span class="toc-text">gulp-spritesmith</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文件类"><span class="toc-number">7.</span> <span class="toc-text">文件类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#del"><span class="toc-number">7.1.</span> <span class="toc-text">del</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-clean"><span class="toc-number">7.2.</span> <span class="toc-text">gulp-clean</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-concat"><span class="toc-number">7.3.</span> <span class="toc-text">gulp-concat</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-recursive-concat"><span class="toc-number">7.4.</span> <span class="toc-text">gulp-recursive-concat</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-rename"><span class="toc-number">7.5.</span> <span class="toc-text">gulp-rename</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-filter"><span class="toc-number">7.6.</span> <span class="toc-text">gulp-filter</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码审查-自动补全"><span class="toc-number">8.</span> <span class="toc-text">代码审查、自动补全</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-eslint"><span class="toc-number">8.1.</span> <span class="toc-text">gulp-eslint</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-jshint"><span class="toc-number">8.2.</span> <span class="toc-text">gulp-jshint</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-autoprefixer"><span class="toc-number">8.3.</span> <span class="toc-text">gulp-autoprefixer</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#autoprefixer"><span class="toc-number">8.4.</span> <span class="toc-text">autoprefixer</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#注释类"><span class="toc-number">9.</span> <span class="toc-text">注释类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-header"><span class="toc-number">9.1.</span> <span class="toc-text">gulp-header</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-footer"><span class="toc-number">9.2.</span> <span class="toc-text">gulp-footer</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#自动加版本号"><span class="toc-number">10.</span> <span class="toc-text">自动加版本号</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-make-css-url-version"><span class="toc-number">10.1.</span> <span class="toc-text">gulp-make-css-url-version</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-rev"><span class="toc-number">10.2.</span> <span class="toc-text">gulp-rev</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-rev-collector"><span class="toc-number">10.3.</span> <span class="toc-text">gulp-rev-collector</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-rev-format"><span class="toc-number">10.4.</span> <span class="toc-text">gulp-rev-format</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#单位转换"><span class="toc-number">11.</span> <span class="toc-text">单位转换</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#postcss-px2rem"><span class="toc-number">11.1.</span> <span class="toc-text">postcss-px2rem</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#流控制"><span class="toc-number">12.</span> <span class="toc-text">流控制</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-if"><span class="toc-number">12.1.</span> <span class="toc-text">gulp-if</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#调试"><span class="toc-number">13.</span> <span class="toc-text">调试</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-debug"><span class="toc-number">13.1.</span> <span class="toc-text">gulp-debug</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-debug-streams"><span class="toc-number">13.2.</span> <span class="toc-text">gulp-debug-streams</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gutil-waterlog"><span class="toc-number">13.3.</span> <span class="toc-text">gutil-waterlog</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-logwarn"><span class="toc-number">13.4.</span> <span class="toc-text">gulp-logwarn</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-spy"><span class="toc-number">13.5.</span> <span class="toc-text">gulp-spy</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-plumber错误处理插件"><span class="toc-number">13.6.</span> <span class="toc-text">gulp-plumber：错误处理插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-notify消息插件"><span class="toc-number">13.7.</span> <span class="toc-text">gulp-notify：消息插件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#增量编译"><span class="toc-number">14.</span> <span class="toc-text">增量编译</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-cache"><span class="toc-number">14.1.</span> <span class="toc-text">gulp-cache</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-cached"><span class="toc-number">14.2.</span> <span class="toc-text">gulp-cached</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-remember"><span class="toc-number">14.3.</span> <span class="toc-text">gulp-remember</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-changed"><span class="toc-number">14.4.</span> <span class="toc-text">gulp-changed</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#项目模板化"><span class="toc-number">15.</span> <span class="toc-text">项目模板化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-data"><span class="toc-number">15.1.</span> <span class="toc-text">gulp-data</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-template"><span class="toc-number">15.2.</span> <span class="toc-text">gulp-template</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-file-include"><span class="toc-number">15.3.</span> <span class="toc-text">gulp-file-include</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#文件目录"><span class="toc-number">16.</span> <span class="toc-text">文件目录</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-recursive-folder"><span class="toc-number">16.1.</span> <span class="toc-text">gulp-recursive-folder</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-folders"><span class="toc-number">16.2.</span> <span class="toc-text">gulp-folders</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#格式化"><span class="toc-number">17.</span> <span class="toc-text">格式化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-jsbeautifier"><span class="toc-number">17.1.</span> <span class="toc-text">gulp-jsbeautifier</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-beautify"><span class="toc-number">17.2.</span> <span class="toc-text">gulp-beautify</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-group-css-media-queries"><span class="toc-number">17.3.</span> <span class="toc-text">gulp-group-css-media-queries</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#环境变量"><span class="toc-number">18.</span> <span class="toc-text">环境变量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#fuck-env"><span class="toc-number">18.1.</span> <span class="toc-text">fuck-env</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#其他插件"><span class="toc-number">19.</span> <span class="toc-text">其他插件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#pretty-error"><span class="toc-number">19.1.</span> <span class="toc-text">pretty-error</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-stats"><span class="toc-number">19.2.</span> <span class="toc-text">gulp-stats</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-task-builder"><span class="toc-number">19.3.</span> <span class="toc-text">gulp-task-builder</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-group"><span class="toc-number">19.4.</span> <span class="toc-text">gulp-group</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-list"><span class="toc-number">19.5.</span> <span class="toc-text">gulp-list</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-manifest"><span class="toc-number">19.6.</span> <span class="toc-text">gulp-manifest</span></a></li></ol></li></ol></nav></div></aside><main class="main" role="main"><div class="content"><article id="post-gulp-comon-plug-in-colation" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting"><div class="article-header"><h1 class="article-title" itemprop="name">gulp常用插件整理</h1><div class="article-meta"><span class="article-date"><i class="icon icon-calendar-check"></i> <a href="/2017/08/06/gulp-comon-plug-in-colation.html" class="article-date"><time datetime="2017-08-06T14:52:29.000Z" itemprop="datePublished">2017-08-06</time></a></span> <span class="article-category"><i class="icon icon-folder"></i> <a class="article-category-link" href="/categories/front-end-development/">前端</a></span> <span class="article-tag"><i class="icon icon-tags"></i> <a class="article-tag-link" href="/tags/gulp/">Gulp</a></span> <span class="article-read hidden-xs"><i class="icon icon-eye-fill" aria-hidden="true"></i> <span id="busuanzi_container_page_pv"><span id="busuanzi_value_page_pv">0</span></span></span> <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2017/08/06/gulp-comon-plug-in-colation.html#comments" class="article-comment-link">评论</a></span> <span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 2,524(字)</span> <span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 11(分)</span></div></div><div class="article-entry marked-body" itemprop="articleBody"><h2 id="任务管理"><a class="markdownIt-Anchor" href="#任务管理"></a> 任务管理</h2><h3 id="gulp-nodemon"><a class="markdownIt-Anchor" href="#gulp-nodemon"></a> gulp-nodemon</h3><p>网址: <a href="https://www.npmjs.com/package/gulp-nodemon" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-nodemon</a><br>说明：自动启动/重启你的node程序，开发node服务端程序必备。</p><h3 id="gulp-task-listing"><a class="markdownIt-Anchor" href="#gulp-task-listing"></a> gulp-task-listing</h3><p>网址: <a href="https://www.npmjs.com/package/gulp-task-listing" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-task-listing</a><br>说明：打印出gulpfile.js中定义的所有task。</p><h3 id="require-dir"><a class="markdownIt-Anchor" href="#require-dir"></a> require-dir</h3><p>网址: <a href="https://www.npmjs.com/package/require-dir" target="_blank" rel="noopener">https://www.npmjs.com/package/require-dir</a><br>说明：分离任务到多个文件中。</p><h3 id="run-sequence"><a class="markdownIt-Anchor" href="#run-sequence"></a> run-sequence</h3><p>网址: <a href="https://www.npmjs.com/package/run-sequence" target="_blank" rel="noopener">https://www.npmjs.com/package/run-sequence</a><br>说明：让gulp任务，可以相互独立，解除任务间的依赖，增强task复用。</p><h3 id="yargs"><a class="markdownIt-Anchor" href="#yargs"></a> yargs</h3><p>网址: <a href="https://www.npmjs.com/package/yargs" target="_blank" rel="noopener">https://www.npmjs.com/package/yargs</a><br>说明：用于获取启动参数，针对不同参数，切换任务执行过程时需要。</p><h2 id="util工具类"><a class="markdownIt-Anchor" href="#util工具类"></a> util工具类</h2><h3 id="gulp-util"><a class="markdownIt-Anchor" href="#gulp-util"></a> gulp-util</h3><p>网址: <a href="https://www.npmjs.com/package/gulp-util" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-util</a><br>说明：gulp常用的工具库。</p><h3 id="gulp-load-plugins"><a class="markdownIt-Anchor" href="#gulp-load-plugins"></a> gulp-load-plugins</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-load-plugins" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-load-plugins</a><br>说明：自动加载插件。</p><h2 id="自动刷新"><a class="markdownIt-Anchor" href="#自动刷新"></a> 自动刷新</h2><h3 id="gulp-connect"><a class="markdownIt-Anchor" href="#gulp-connect"></a> gulp-connect</h3><p>网址: <a href="https://www.npmjs.com/package/gulp-connect" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-connect</a><br>说明：前端数据模拟服务器，同时也支持浏览器自动刷新。</p><h3 id="browser-sync"><a class="markdownIt-Anchor" href="#browser-sync"></a> browser-sync</h3><p>网址: <a href="http://www.browsersync.io/" target="_blank" rel="noopener">http://www.browsersync.io/</a><br>说明：静态文件服务器，同时也支持浏览器自动刷新，它能实现LiveReload所有功能。</p><h3 id="gulp-livereload"><a class="markdownIt-Anchor" href="#gulp-livereload"></a> <s>gulp-livereload</s></h3><p>网址：<a href="https://www.npmjs.com/package/gulp-load-plugins" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-load-plugins</a><br>说明：自动刷新。</p><h2 id="编译类"><a class="markdownIt-Anchor" href="#编译类"></a> 编译类</h2><h3 id="gulp-base64"><a class="markdownIt-Anchor" href="#gulp-base64"></a> gulp-base64</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-base64" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-base64</a><br>说明：把小图片转成base64字符串。</p><h3 id="gulp-babel"><a class="markdownIt-Anchor" href="#gulp-babel"></a> gulp-babel</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-babel" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-babel</a><br>说明：让ES6编写的JavaScript代码转化成浏览器可以理解的JavaScript代码。使用 babel 编译 JS 文件，比如将ES6代码编译成ES5。</p><h3 id="gulp-less"><a class="markdownIt-Anchor" href="#gulp-less"></a> gulp-less</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-less" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-less</a><br>说明：将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。</p><h3 id="gulp-sass"><a class="markdownIt-Anchor" href="#gulp-sass"></a> gulp-sass</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-sass" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-sass</a><br>说明：把 Sass 编译成 CSS。</p><h3 id="gulp-postcss"><a class="markdownIt-Anchor" href="#gulp-postcss"></a> gulp-postcss</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-postcss" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-postcss</a><br>说明：把 postcss 编译成 CSS。</p><h3 id="gulp-coffee"><a class="markdownIt-Anchor" href="#gulp-coffee"></a> gulp-coffee</h3><p>网址: <a href="https://github.com/wearefractal/gulp-coffee" target="_blank" rel="noopener">https://github.com/wearefractal/gulp-coffee</a><br>说明：编译coffee代码为Js代码，使用coffeescript必备。</p><h3 id="gulp-sourcemaps"><a class="markdownIt-Anchor" href="#gulp-sourcemaps"></a> gulp-sourcemaps</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-sourcemaps" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-sourcemaps</a><br>说明：处理JS时，生成SourceMap。</p><h2 id="压缩优化类"><a class="markdownIt-Anchor" href="#压缩优化类"></a> 压缩优化类</h2><h3 id="gulp-uglify"><a class="markdownIt-Anchor" href="#gulp-uglify"></a> gulp-uglify</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-uglify" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-uglify</a><br>说明：用来混淆、压缩js文件，使用的是uglify引擎。</p><h3 id="gulp-minify"><a class="markdownIt-Anchor" href="#gulp-minify"></a> <s>gulp-minify</s></h3><p>网址：<a href="https://www.npmjs.com/package/gulp-minify" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-minify</a><br>说明：压缩js文件,推荐使用gulp-uglify，Minify JavaScript with UglifyJS2.。</p><h3 id="gulp-minify-inline-scripts"><a class="markdownIt-Anchor" href="#gulp-minify-inline-scripts"></a> gulp-minify-inline-scripts</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-minify-inline-scripts" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-minify-inline-scripts</a><br>说明：压缩行内脚本。</p><h3 id="gulp-minify-css"><a class="markdownIt-Anchor" href="#gulp-minify-css"></a> <s>gulp-minify-css</s></h3><p>网址：<a href="https://www.npmjs.com/package/gulp-minify-css" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-minify-css</a><br>说明：css文件压缩，gulp-minify-css已经被废弃，请使用gulp-clean-css。</p><h3 id="gulp-clean-css"><a class="markdownIt-Anchor" href="#gulp-clean-css"></a> gulp-clean-css</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-clean-css" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-clean-css</a><br>说明：css文件进行去注释,css文件压缩。</p><h3 id="gulp-csso"><a class="markdownIt-Anchor" href="#gulp-csso"></a> gulp-csso</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-csso" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-csso</a><br>说明：压缩优化css。</p><h3 id="gulp-uncss"><a class="markdownIt-Anchor" href="#gulp-uncss"></a> gulp-uncss</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-uncss" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-uncss</a><br>说明：清理多余无用css。</p><h3 id="gulp-useref"><a class="markdownIt-Anchor" href="#gulp-useref"></a> gulp-useref</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-useref" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-useref</a><br>说明：解析构建块在HTML文件来代替引用未经优化的脚本和样式表。</p><h3 id="gulp-html-replace"><a class="markdownIt-Anchor" href="#gulp-html-replace"></a> gulp-html-replace</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-html-replace" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-html-replace</a><br>说明：替换html中的构建块。Replace build blocks in HTML. Like useref but done right.</p><h3 id="gulp-minify-html"><a class="markdownIt-Anchor" href="#gulp-minify-html"></a> <s>gulp-minify-html</s></h3><p>网址：<a href="https://www.npmjs.com/package/gulp-minify-html" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-minify-html</a><br>说明：html文件压缩，已废弃，推荐使用gulp-htmlmin。</p><h3 id="gulp-htmlmin"><a class="markdownIt-Anchor" href="#gulp-htmlmin"></a> gulp-htmlmin</h3><p>网址：<a href="https://github.com/jonschlinkert/gulp-htmlmin" target="_blank" rel="noopener">https://github.com/jonschlinkert/gulp-htmlmin</a><br>说明：html文件压缩,如去换行，去注释等。</p><h3 id="jsonminify"><a class="markdownIt-Anchor" href="#jsonminify"></a> jsonminify</h3><p>网址：<a href="https://www.npmjs.com/package/jsonminify" target="_blank" rel="noopener">https://www.npmjs.com/package/jsonminify</a><br>说明：Json压缩</p><h3 id="gulp-pretty-data"><a class="markdownIt-Anchor" href="#gulp-pretty-data"></a> gulp-pretty-data</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-pretty-data" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-pretty-data</a><br>说明：压缩美化xml, json, css, sql。</p><h3 id="gulp-image"><a class="markdownIt-Anchor" href="#gulp-image"></a> gulp-image</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-image" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-image</a><br>说明：图片压缩。</p><h3 id="gulp-imagemin"><a class="markdownIt-Anchor" href="#gulp-imagemin"></a> gulp-imagemin</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-imagemin" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-imagemin</a><br>说明：图片压缩,对jpg、png等格式问的图片进行无损的压缩（特别有用，但是在你的node-modules中的插件过多时会存在图片压缩过慢的问题问题）。</p><h3 id="imagemin-pngquant"><a class="markdownIt-Anchor" href="#imagemin-pngquant"></a> imagemin-pngquant</h3><p>网址：<a href="https://www.npmjs.com/package/imagemin-pngquant" target="_blank" rel="noopener">https://www.npmjs.com/package/imagemin-pngquant</a><br>说明：图片压缩。</p><h3 id="gulp-zip"><a class="markdownIt-Anchor" href="#gulp-zip"></a> gulp-zip</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-zip" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-zip</a><br>说明：ZIP压缩文件。</p><h2 id="css-sprites-图片精灵"><a class="markdownIt-Anchor" href="#css-sprites-图片精灵"></a> css sprites 图片精灵</h2><h3 id="gulpspritesmith"><a class="markdownIt-Anchor" href="#gulpspritesmith"></a> gulp.spritesmith</h3><p>网址：<a href="https://www.npmjs.com/package/gulp.spritesmith" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp.spritesmith</a><br>说明：Convert a set of images into a spritesheet and CSS variables via gulp.</p><h3 id="gulpspritesmith-multi"><a class="markdownIt-Anchor" href="#gulpspritesmith-multi"></a> gulp.spritesmith-multi</h3><p>网址：<a href="https://www.npmjs.com/package/gulp.spritesmith-multi" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp.spritesmith-multi</a><br>说明：A wrapper for gulp.spritesmith to generate multiple sprites and stylesheets.</p><h3 id="gulp-sprite-generator"><a class="markdownIt-Anchor" href="#gulp-sprite-generator"></a> gulp-sprite-generator</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-sprite-generator" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-sprite-generator</a><br>说明：Plugin that generate sprites from your stylesheets (using spritesmith) and then updates image references.</p><h3 id="gulp-spritesmith"><a class="markdownIt-Anchor" href="#gulp-spritesmith"></a> gulp-spritesmith</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-spritesmith" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-spritesmith</a><br>说明：Gulp plugin for sprite generation, based on spritesmith.</p><h2 id="文件类"><a class="markdownIt-Anchor" href="#文件类"></a> 文件类</h2><h3 id="del"><a class="markdownIt-Anchor" href="#del"></a> del</h3><p>网址：<a href="https://www.npmjs.com/package/del" target="_blank" rel="noopener">https://www.npmjs.com/package/del</a><br>说明：删除文件/文件夹。</p><h3 id="gulp-clean"><a class="markdownIt-Anchor" href="#gulp-clean"></a> gulp-clean</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-clean" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-clean</a><br>说明：删除文件/文件夹。</p><h3 id="gulp-concat"><a class="markdownIt-Anchor" href="#gulp-concat"></a> gulp-concat</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-concat" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-concat</a><br>说明：文件合并，合并JS。</p><h3 id="gulp-recursive-concat"><a class="markdownIt-Anchor" href="#gulp-recursive-concat"></a> gulp-recursive-concat</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-recursive-concat" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-recursive-concat</a><br>说明：按文件夹递归合并JS。</p><h3 id="gulp-rename"><a class="markdownIt-Anchor" href="#gulp-rename"></a> gulp-rename</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-rename" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-rename</a><br>说明：用来重命名文件流中的文件。</p><h3 id="gulp-filter"><a class="markdownIt-Anchor" href="#gulp-filter"></a> gulp-filter</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-filter" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-filter</a><br>说明：在虚拟文件流中过滤文件。</p><h2 id="代码审查-自动补全"><a class="markdownIt-Anchor" href="#代码审查-自动补全"></a> 代码审查、自动补全</h2><h3 id="gulp-eslint"><a class="markdownIt-Anchor" href="#gulp-eslint"></a> gulp-eslint</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-eslint" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-eslint</a><br>说明：检查Javascript编程时的语法错误，与gulp-jshint二选一即可。</p><h3 id="gulp-jshint"><a class="markdownIt-Anchor" href="#gulp-jshint"></a> gulp-jshint</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-jshint" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-jshint</a><br>说明：js代码检查，与gulp-eslint二选一即可。</p><h3 id="gulp-autoprefixer"><a class="markdownIt-Anchor" href="#gulp-autoprefixer"></a> gulp-autoprefixer</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-autoprefixer" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-autoprefixer</a><br>说明：使用Autoprefixer来补全浏览器兼容的css，与autoprefixer功能相同，二选一即可。</p><h3 id="autoprefixer"><a class="markdownIt-Anchor" href="#autoprefixer"></a> autoprefixer</h3><p>网址：<a href="https://www.npmjs.com/package/autoprefixer" target="_blank" rel="noopener">https://www.npmjs.com/package/autoprefixer</a><br>说明：自动添加浏览器前缀,补全浏览器兼容的css。</p><h2 id="注释类"><a class="markdownIt-Anchor" href="#注释类"></a> 注释类</h2><h3 id="gulp-header"><a class="markdownIt-Anchor" href="#gulp-header"></a> gulp-header</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-header" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-header</a><br>说明：用来在压缩后的JS、CSS文件中添加头部注释，你可以包含任意想要的信息，通常就是作者、描述、版本号、license等，比如</p><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function getHeader () &#123;</span><br><span class="line">    var pkg = require(&apos;package.json&apos;);</span><br><span class="line">    var template = [&apos;/**&apos;,</span><br><span class="line">        &apos; * &lt;%= pkg.name %&gt; - &lt;%= pkg.description %&gt;&apos;,</span><br><span class="line">        &apos; * @authors &lt;%= pkg.authors %&gt;&apos;,</span><br><span class="line">        &apos; * @version v&lt;%= pkg.version %&gt;&apos;,</span><br><span class="line">        &apos; * @link &lt;%= pkg.homepage %&gt;&apos;,</span><br><span class="line">        &apos; * @license &lt;%= pkg.license %&gt;&apos;,</span><br><span class="line">        &apos; */&apos;,</span><br><span class="line">        &apos;&apos;</span><br><span class="line">    ].join(&apos;\n&apos;);</span><br><span class="line">    return $.header(template, &#123;</span><br><span class="line">        pkg: pkg</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="gulp-footer"><a class="markdownIt-Anchor" href="#gulp-footer"></a> gulp-footer</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-footer" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-footer</a><br>说明：用来在压缩后的JS、CSS文件中添加页脚注释。</p><h2 id="自动加版本号"><a class="markdownIt-Anchor" href="#自动加版本号"></a> 自动加版本号</h2><h3 id="gulp-make-css-url-version"><a class="markdownIt-Anchor" href="#gulp-make-css-url-version"></a> gulp-make-css-url-version</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-make-css-url-version" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-make-css-url-version</a><br>说明：默认是取图片文件的md5值作为版本号。</p><h3 id="gulp-rev"><a class="markdownIt-Anchor" href="#gulp-rev"></a> gulp-rev</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-rev" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-rev</a><br>说明：对文件进行hash命名，并且生成对应的json文件(对css、js文件名加MD5后缀)，配合gulp-rev-collector使用。</p><h3 id="gulp-rev-collector"><a class="markdownIt-Anchor" href="#gulp-rev-collector"></a> gulp-rev-collector</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-rev-collector" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-rev-collector</a><br>说明：结合gulp-rev对hash的文件在html文件中进行引用路径更改,替换html中的链接，配合gulp-rev使用。</p><h3 id="gulp-rev-format"><a class="markdownIt-Anchor" href="#gulp-rev-format"></a> gulp-rev-format</h3><p>网址：<a href="https://github.com/atamas101/gulp-rev-format" target="_blank" rel="noopener">https://github.com/atamas101/gulp-rev-format</a><br>说明：格式化文件版本号，需配合gulp-rev使用。</p><h2 id="单位转换"><a class="markdownIt-Anchor" href="#单位转换"></a> 单位转换</h2><h3 id="postcss-px2rem"><a class="markdownIt-Anchor" href="#postcss-px2rem"></a> postcss-px2rem</h3><p>网址：<a href="https://www.npmjs.com/package/postcss-px2rem" target="_blank" rel="noopener">https://www.npmjs.com/package/postcss-px2rem</a><br>说明：px单位转换成rem单位</p><h2 id="流控制"><a class="markdownIt-Anchor" href="#流控制"></a> 流控制</h2><h3 id="gulp-if"><a class="markdownIt-Anchor" href="#gulp-if"></a> gulp-if</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-if" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-if</a><br>说明：有条件地运行一个任务。</p><h2 id="调试"><a class="markdownIt-Anchor" href="#调试"></a> 调试</h2><h3 id="gulp-debug"><a class="markdownIt-Anchor" href="#gulp-debug"></a> gulp-debug</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-debug" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-debug</a><br>说明：gulp脚本调试。</p><h3 id="gulp-debug-streams"><a class="markdownIt-Anchor" href="#gulp-debug-streams"></a> gulp-debug-streams</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-debug-streams" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-debug-streams</a><br>说明：gulp脚本调试。</p><h3 id="gutil-waterlog"><a class="markdownIt-Anchor" href="#gutil-waterlog"></a> gutil-waterlog</h3><p>网址：<a href="https://www.npmjs.com/package/gutil-waterlog" target="_blank" rel="noopener">https://www.npmjs.com/package/gutil-waterlog</a><br>说明：gulp任务日志。</p><h3 id="gulp-logwarn"><a class="markdownIt-Anchor" href="#gulp-logwarn"></a> gulp-logwarn</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-logwarn" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-logwarn</a><br>说明：gulp任务日志。</p><h3 id="gulp-spy"><a class="markdownIt-Anchor" href="#gulp-spy"></a> gulp-spy</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-spy" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-spy</a><br>说明：gulp脚本调试。</p><h3 id="gulp-plumber错误处理插件"><a class="markdownIt-Anchor" href="#gulp-plumber错误处理插件"></a> gulp-plumber：错误处理插件</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-plumber" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-plumber</a><br>说明：使用watch模式可以更高效的开发，监听到改动就自动执行任务，但是如果过程中遇到错误，gulp就会报错并终止watch模式，必须重新启动gulp，利用gulp-plumber可以实现错误自启动。</p><h3 id="gulp-notify消息插件"><a class="markdownIt-Anchor" href="#gulp-notify消息插件"></a> gulp-notify：消息插件</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-notify" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-notify</a><br>说明：显示报错信息和报错后不终止当前gulp任务。</p><h2 id="增量编译"><a class="markdownIt-Anchor" href="#增量编译"></a> 增量编译</h2><h3 id="gulp-cache"><a class="markdownIt-Anchor" href="#gulp-cache"></a> gulp-cache</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-cache" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-cache</a><br>说明：检测改动的文件,图片缓存，只有图片替换了才压缩</p><h3 id="gulp-cached"><a class="markdownIt-Anchor" href="#gulp-cached"></a> gulp-cached</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-cached" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-cached</a><br>说明：增量编译打包,对文件进行复制时，只是对那行更改过的文件进行复制，减少不必要的资源操作。</p><h3 id="gulp-remember"><a class="markdownIt-Anchor" href="#gulp-remember"></a> gulp-remember</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-remember" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-remember</a><br>说明：配合gulp-cached使用。</p><h3 id="gulp-changed"><a class="markdownIt-Anchor" href="#gulp-changed"></a> gulp-changed</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-changed" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-changed</a><br>说明：只编译或打包改变过文件 ，大大加快了gulp task的执行速度,跟gulp-cacahed插件类似，主要是在对文件进行复制时，如果该文件没有改动过，那么就不允许该文件复制到目标文件件。（实测时看不出来，如果使用cached,就不用使用这个了）。<br><strong>实际开发中用 gulp-cached+gulp-remember 的组合非常合适。</strong></p><h2 id="项目模板化"><a class="markdownIt-Anchor" href="#项目模板化"></a> 项目模板化</h2><h3 id="gulp-data"><a class="markdownIt-Anchor" href="#gulp-data"></a> gulp-data</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-data" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-data</a><br>说明：提供数据，该数据可被其他gulp插件使用。</p><h3 id="gulp-template"><a class="markdownIt-Anchor" href="#gulp-template"></a> gulp-template</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-template" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-template</a><br>说明：渲染模板，替换变量以及动态html。</p><h3 id="gulp-file-include"><a class="markdownIt-Anchor" href="#gulp-file-include"></a> gulp-file-include</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-file-include" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-file-include</a><br>说明：include 文件。</p><h2 id="文件目录"><a class="markdownIt-Anchor" href="#文件目录"></a> 文件目录</h2><h3 id="gulp-recursive-folder"><a class="markdownIt-Anchor" href="#gulp-recursive-folder"></a> gulp-recursive-folder</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-recursive-folder" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-recursive-folder</a><br>说明：Gulp plugin that work with folders treat them recursively。</p><h3 id="gulp-folders"><a class="markdownIt-Anchor" href="#gulp-folders"></a> gulp-folders</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-folders" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-folders</a><br>说明：Gulp plugin that lets you work with folders and treat them as package names。</p><h2 id="格式化"><a class="markdownIt-Anchor" href="#格式化"></a> 格式化</h2><h3 id="gulp-jsbeautifier"><a class="markdownIt-Anchor" href="#gulp-jsbeautifier"></a> gulp-jsbeautifier</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-jsbeautifier" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-jsbeautifier</a><br>说明：Prettify JavaScript, JSON, HTML and CSS.</p><h3 id="gulp-beautify"><a class="markdownIt-Anchor" href="#gulp-beautify"></a> gulp-beautify</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-beautify" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-beautify</a><br>说明：This is a gulp plugin for js-beautify.</p><h3 id="gulp-group-css-media-queries"><a class="markdownIt-Anchor" href="#gulp-group-css-media-queries"></a> gulp-group-css-media-queries</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-group-css-media-queries" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-group-css-media-queries</a><br>说明：格式化css媒体查询语句。</p><h2 id="环境变量"><a class="markdownIt-Anchor" href="#环境变量"></a> 环境变量</h2><h3 id="fuck-env"><a class="markdownIt-Anchor" href="#fuck-env"></a> fuck-env</h3><p>网址：<a href="https://www.npmjs.com/package/fuck-env" target="_blank" rel="noopener">https://www.npmjs.com/package/fuck-env</a><br>说明：用于跨平台设置脚本环境变量，支持 .env 类型文件和 package.json 的 config 字段。</p><h2 id="其他插件"><a class="markdownIt-Anchor" href="#其他插件"></a> 其他插件</h2><h3 id="pretty-error"><a class="markdownIt-Anchor" href="#pretty-error"></a> pretty-error</h3><p>网址：<a href="https://www.npmjs.com/package/pretty-error" target="_blank" rel="noopener">https://www.npmjs.com/package/pretty-error</a><br>说明：一个小工具，美化node.js错误提示。</p><h3 id="gulp-stats"><a class="markdownIt-Anchor" href="#gulp-stats"></a> gulp-stats</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-stats" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-stats</a><br>说明：显示gulp任务统计信息。</p><h3 id="gulp-task-builder"><a class="markdownIt-Anchor" href="#gulp-task-builder"></a> gulp-task-builder</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-task-builder" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-task-builder</a><br>说明：JSON配置构建任务。</p><h3 id="gulp-group"><a class="markdownIt-Anchor" href="#gulp-group"></a> gulp-group</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-group" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-group</a><br>说明：任务分组。</p><h3 id="gulp-list"><a class="markdownIt-Anchor" href="#gulp-list"></a> gulp-list</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-list" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-list</a><br>说明：在控制台列出所有可用任务。</p><h3 id="gulp-manifest"><a class="markdownIt-Anchor" href="#gulp-manifest"></a> gulp-manifest</h3><p>网址：<a href="https://www.npmjs.com/package/gulp-manifest" target="_blank" rel="noopener">https://www.npmjs.com/package/gulp-manifest</a><br>说明：生成 HTML5 缓存清单文件。</p></div><div class="article-footer"><blockquote class="mt-2x"><ul class="post-copyright list-unstyled"><li class="post-copyright-link hidden-xs"><strong>本文链接：</strong> <a href="https://blog.cofess.com/2017/08/06/gulp-comon-plug-in-colation.html" title="gulp常用插件整理" target="_blank" rel="external">https://blog.cofess.com/2017/08/06/gulp-comon-plug-in-colation.html</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！</li></ul></blockquote><div class="panel panel-default panel-badger"><div class="panel-body"><figure class="media"><div class="media-left"><a href="https://github.com/cofess" target="_blank" class="img-burn thumb-sm visible-lg"><img src="/images/avatar.jpg" class="img-rounded w-full" alt=""></a></div><div class="media-body"><h3 class="media-heading"><a href="https://github.com/cofess" target="_blank"><span class="text-dark">Cofess</span><small class="ml-1x">Web Developer &amp; Designer</small></a></h3><div>喜欢新事物，关注前端动态，对新的技术有追求； 喜欢产品，喜欢设计，喜欢 coding。</div></div></figure></div></div></div></article><section id="comments"></section></div><nav class="bar bar-footer clearfix" data-stick-bottom><div class="bar-inner"><ul class="pager pull-left"><li class="prev"><a href="/2017/08/15/third-party-socialized-review-system.html" title="第三方社会化评论系统整理"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a></li><li class="next"><a href="/2017/04/09/hexo-builds-a-personal-blog-and-deploys-to-github.html" title="Hexo搭建个人博客并部署到Github"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a></li><li class="toggle-toc"><a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="文章目录" role="button"><span>[&nbsp;</span><span>文章目录</span> <i class="text-collapsed icon icon-anchor"></i> <i class="text-in icon icon-close"></i> <span>]</span></a></li></ul><button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>赏</span></button><div class="bar-right"><div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div></div></div></nav><div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content donate"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><div class="modal-body"><div class="donate-box"><div class="donate-head"><p>感谢您的支持，我会继续努力的!</p></div><div class="tab-content"><div role="tabpanel" class="tab-pane fade active in" id="alipay"><div class="donate-payimg"><img src="/images/donate/alipayimg.png" alt="扫码支持" title="扫一扫"></div><p class="text-muted mv">扫码打赏，你说多少就多少</p><p class="text-grey">打开支付宝扫一扫，即可进行扫码打赏哦</p></div><div role="tabpanel" class="tab-pane fade" id="wechatpay"><div class="donate-payimg"><img src="/images/donate/wechatpayimg.png" alt="扫码支持" title="扫一扫"></div><p class="text-muted mv">扫码打赏，你说多少就多少</p><p class="text-grey">打开微信扫一扫，即可进行扫码打赏哦</p></div></div><div class="donate-footer"><ul class="nav nav-tabs nav-justified" role="tablist"><li role="presentation" class="active"><a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> 支付宝</a></li><li role="presentation"><a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> 微信支付</a></li></ul></div></div></div></div></div></div></main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter"><ul class="social-links"><li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle="tooltip" data-placement="top"><i class="icon icon-github"></i></a></li><li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle="tooltip" data-placement="top"><i class="icon icon-weibo"></i></a></li><li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle="tooltip" data-placement="top"><i class="icon icon-twitter"></i></a></li><li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle="tooltip" data-placement="top"><i class="icon icon-behance"></i></a></li><li><a href="/atom.xml" target="_blank" title="Rss" data-toggle="tooltip" data-placement="top"><i class="icon icon-rss"></i></a></li></ul><div class="copyright"><div class="publishby">Theme by <a href="https://github.com/cofess" target="_blank">cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.</div></div></footer><script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script>window.jQuery||document.write('<script src="js/jquery.min.js"><\/script>')</script><script src="/js/plugin.min.js"></script><script src="/js/application.js"></script><script>!function(T){var N={TRANSLATION:{POSTS:"文章",PAGES:"页面",CATEGORIES:"分类",TAGS:"标签",UNTITLED:"(未命名)"},ROOT_URL:"/",CONTENT_URL:"/content.json"};T.INSIGHT_CONFIG=N}(window)</script><script src="/js/insight.js"></script><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script src="//cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.min.js"></script><script src="//cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js"></script><script type="text/javascript">var gitalk=new Gitalk({clientID:"117ceb07d9a749327e31",clientSecret:"a3bf14c0631419331611a1752e9c620aa3b6b8b6",repo:"cofess.github.io",owner:"cofess",admin:["cofess"],id:md5(location.pathname),distractionFreeMode:!0});gitalk.render("comments")</script></body></html><!-- rebuild by neat -->